{% extends "base.html" %}

{% block title %}编码转换{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8 mx-auto">
        <h2 class="mb-4">
            <i class="fas fa-exchange-alt text-success"></i> 编码转换工具
        </h2>
        
        <div class="card">
            <div class="card-body">
                <form id="encodingForm" enctype="multipart/form-data">
                    <div class="mb-3">
                        <label for="textFile" class="form-label">选择文本文件 <span class="text-danger">*</span></label>
                        <input type="file" class="form-control" id="textFile" name="file" accept=".txt,.log,.csv" required>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">源编码</label>
                            <button type="button" class="btn btn-outline-primary w-100" id="detectBtn">
                                <i class="fas fa-search"></i> 自动检测
                            </button>
                            <select class="form-select mt-2" id="sourceEncoding" name="source_encoding">
                                <option value="">自动检测</option>
                                <option value="utf-8">UTF-8</option>
                                <option value="gbk">GBK</option>
                                <option value="gb2312">GB2312</option>
                                <option value="big5">Big5</option>
                                <option value="iso-8859-1">ISO-8859-1</option>
                            </select>
                            <div id="detectedEncoding" class="form-text"></div>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="targetEncoding" class="form-label">目标编码 <span class="text-danger">*</span></label>
                            <select class="form-select" id="targetEncoding" name="target_encoding" required>
                                <option value="utf-8" selected>UTF-8</option>
                                <option value="gbk">GBK</option>
                                <option value="gb2312">GB2312</option>
                                <option value="big5">Big5</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-success btn-lg">
                            <i class="fas fa-sync-alt"></i> 转换编码
                        </button>
                    </div>
                </form>
            </div>
        </div>
        
        <div id="resultMessage" class="mt-3"></div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let uploadedFilename = '';

$(document).ready(function() {
    // 自动检测编码
    $('#detectBtn').on('click', function() {
        const fileInput = $('#textFile')[0];
        if (!fileInput.files[0]) {
            alert('请先选择文件');
            return;
        }
        
        const formData = new FormData();
        formData.append('file', fileInput.files[0]);
        
        $.ajax({
            url: '{{ url_for("tools.detect_encoding") }}',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.success) {
                    $('#sourceEncoding').val(response.encoding);
                    $('#detectedEncoding').html(`
                        <span class="text-success">
                            <i class="fas fa-check-circle"></i> 检测到编码: ${response.encoding}
                        </span>
                    `);
                    uploadedFilename = fileInput.files[0].name;
                }
            },
            error: function() {
                $('#detectedEncoding').html(`
                    <span class="text-danger">
                        <i class="fas fa-exclamation-circle"></i> 检测失败
                    </span>
                `);
            }
        });
    });
    
    // 转换编码
    $('#encodingForm').on('submit', function(e) {
        e.preventDefault();
        
        const data = {
            filename: uploadedFilename || $('#textFile')[0].files[0].name,
            source_encoding: $('#sourceEncoding').val(),
            target_encoding: $('#targetEncoding').val()
        };
        
        $.ajax({
            url: '{{ url_for("tools.convert_encoding") }}',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function(response) {
                if (response.success) {
                    $('#resultMessage').html(`
                        <div class="alert alert-success">
                            <i class="fas fa-check-circle"></i> ${response.message}
                            <a href="{{ url_for('tools.download_file', filename='') }}${response.filename}" class="btn btn-sm btn-success ms-2">
                                <i class="fas fa-download"></i> 下载文件
                            </a>
                        </div>
                    `);
                } else {
                    $('#resultMessage').html(`
                        <div class="alert alert-danger">
                            <i class="fas fa-exclamation-circle"></i> ${response.message}
                        </div>
                    `);
                }
            },
            error: function() {
                $('#resultMessage').html(`
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-circle"></i> 转换失败，请稍后重试
                    </div>
                `);
            }
        });
    });
});
</script>
{% endblock %}

